<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Zofund JobDispatcher</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>

</head>

<body data-type="jobdetail">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header>
            <div class="am-fl tpl-header-logo">
                <div class="am-fl tpl-header-switch-button am-icon-list"><span></span></div>
            </div>
        </header>
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div class="left-sidebar">
            <!-- 菜单 -->
            <ul class="sidebar-nav">
                <li class="sidebar-nav-link">
                    <a href="index.html" class="active">
                        <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="historyjob-list.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i>历史Job
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="jobeditor.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i>job编辑器
                    </a>
                </li>
<!--                 <li class="sidebar-nav-link">
                    <a href="tables.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 表格
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="calendar.html">
                        <i class="am-icon-calendar sidebar-nav-link-logo"></i> 日历
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="form.html">
                        <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 表单

                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="chart.html">
                        <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 图表

                    </a>
                </li>

                <li class="sidebar-nav-heading">Page<span class="sidebar-nav-heading-info"> 常用页面</span></li>
                <li class="sidebar-nav-link">
                    <a href="javascript:;" class="sidebar-nav-sub-title">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 数据列表
                        <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
                    </a>
                    <ul class="sidebar-nav sidebar-nav-sub">
                        <li class="sidebar-nav-link">
                            <a href="table-list.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 文字列表
                            </a>
                        </li>

                        <li class="sidebar-nav-link">
                            <a href="table-list-img.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 图文列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="sidebar-nav-link">
                    <a href="sign-up.html">
                        <i class="am-icon-clone sidebar-nav-link-logo"></i> 注册
                        <span class="am-badge am-badge-secondary sidebar-nav-link-logo-ico am-round am-fr am-margin-right-sm">6</span>
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="login.html">
                        <i class="am-icon-key sidebar-nav-link-logo"></i> 登录
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="404.html">
                        <i class="am-icon-tv sidebar-nav-link-logo"></i> 404错误
                    </a>
                </li> -->

            </ul>
        </div>


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span>调度引擎首页 <small>Amaze UI</small></div>
                        <p class="page-header-description">这里加上一些介绍</p>
                    </div>
                </div>

            </div>

            <div class="row-content am-cf">
                <div class="row am-cf">
                    <div class="am-u-sm-12 am-u-md-12">
                        <div class="widget am-cf">
                            <div class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="jobdetail">
                            </div>
                        </div>
                    </div>
                </div>
             </div>
             <div class="am-g">
  					<div class="am-u-sm-6">
  						<button type="button" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success" onclick="javascript:stopJob();">暂停该Job</button>
    				</div>
  					<div class="am-u-sm-6">
                         <button type="button" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success" onclick="javascript:startJob();">启动该job</button>
					</div>
			  </div>
        </div>
    </div>
    </div>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/amazeui.datatables.min.js"></script>
    <script src="assets/js/dataTables.responsive.min.js"></script>
    <script src="assets/js/app.js"></script>
    <script>
    $(function(){ 
	    var jobCode = GetQueryString("jobcode");
	    var eventtime = GetQueryString("eventtime");
	    if(GetQueryString("ifhis")==1){
		    $("#job-opt-btn").hide();
	    }
		//Ajax调用处理
	    $.ajax({
	           type: "GET",
	           url: "graph/tasksinjob?jobcode="+jobCode+"&eventtime="+eventtime,
	           success: function(data){
	        	    // 基于准备好的dom，初始化echarts实例
	        	    var myChart = echarts.init(document.getElementById('jobdetail'));
					if(null!=data&&null!=data.nodes&&null!=data.links){
						  var myData = data.nodes;
						  var myLinks = data.links;
	                   // 指定图表的配置项和数据
	                      option = {
	                      title: {
	                    	  textStyle:{ //设置主标题风格
 	                         		color:'white'//设置主标题字体颜色
	                    	  },
	                          text: 'Job:'+jobCode+',批次日期:'+eventtime+'具体运行情况'
	                      },
	                      tooltip: {},
	                      animationDurationUpdate: 1500,
	                      animationEasingUpdate: 'quinticInOut',
	                      formatter: function(params){//触发之后返回的参数，这个函数是关键
	                            return params.data.label;
	                       },
	                      series : [
	                          {
	                              type: 'graph',
	                              layout: 'none',
	                              symbolSize: 20,
	                              roam: true,
	                              itemStyle: {
					               		 normal: {
					                  			  color: function(params) {
					                        	   			return params.data.color;
					                         		 }
					               				 }
					           	  },
	                              label: {
	                                  normal: {
	                                	    show:true,                  //是否显示标签。
	                                	    color:'black',
	                                	    position:"inside",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
	                                	    offset:[0, 0],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
	                                	    formatter: function(params){
	                                            return params.data.name;
	                                        }       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
	                                	}
	                              },
	                              edgeSymbol: ['circle', 'arrow'],
	                              edgeSymbolSize: [4, 10],
	                              edgeLabel: {
	                                  normal: {
	                                      textStyle: {
	                                          fontSize: 20
	                                      }
	                                  }
	                              },
	                              data: myData,
	                              links: myLinks,
	                              lineStyle: {
	                                  normal: {
	                                      opacity: 0.9,
	                                      width: 2,
	                                      curveness: 0
	                                  }
	                              }
	                          }
	                      ]
	                  	};
	                   
	                      //实现节点点击事件
	                     function focus(param) {
	                    	  var option = myChart.getOption();
	                     	  var data = param.data;
	                     	  //判断节点的相关数据是否正确
	                     	  if (data != null && data != undefined) {
	                          //根据节点的扩展属性url打开新页面
	                          window.location.href="taskdetail.html?taskcode="+data.name+"&jobcode="+jobCode+"&eventtime="+eventtime+"&ifhis="+GetQueryString("ifhis");
	                         }
	                     }

	                    //绑定图表节点的点击事件
	                     myChart.on("click", focus)
	                    // 使用刚指定的配置项和数据显示图表。
	                    myChart.setOption(option);
						}
	                  }
	            });
	  });
    </script>

</body>

</html>